<template>
  <AdminLayout>
    <div class="news-management" style="min-height: calc(100vh - 60px);">
      <div class="page-header">
        <h2>新闻管理</h2>
      </div>
      
      <div class="search-filter">
        <div class="search-box">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 19C15.42 19 19 15.42 19 11C19 6.58 15.42 3 11 3C6.58 3 3 6.58 3 11C3 15.42 6.58 19 11 19ZM21 21L16.65 16.65" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <input type="text" placeholder="搜索新闻标题..." v-model="searchQuery"/>
        </div>
        <div class="filter-select">
          <select v-model="statusFilter">
            <option value="all">全部状态</option>
            <option value="published">已发布</option>
            <option value="draft">草稿</option>
          </select>
        </div>
        <div class="search-actions">
          <button class="search-button" @click="performSearch">
            搜索
          </button>
          <button class="reset-button" @click="resetFilters">
            重置
          </button>
          <button class="special-button" @click="">
            SPEEDED FLY PEOPLE
          </button>
          <button class="add-button" @click="showAddNewsModal = true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 5V19M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>添加新闻</span>
          </button>
        </div>
      </div>
      
      <div class="news-table-container">
        <table class="news-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>重要等级</th>
              <th>标题</th>
              <th>图片</th>
              <th>发布日期</th>
              <th>状态</th>
              <th>发布人</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="news in filteredNews" :key="news.id">
              <td>{{ news.id }}</td>
              <td>
                <span class="important-level-badge" :class="news.importantLevel">
                  {{ getImportantLevelText(news.importantLevel) }}
                </span>
              </td>
              <td class="news-title">{{ news.title }}</td>
              <td class="image-cell">
                <div v-if="news.images && news.images.length > 0" class="news-image-container">
                  <img :src="news.images[0]" alt="{{ news.title }}" class="news-thumbnail" @click="showImageGallery(news.images)">
                  <span v-if="news.images.length > 1" class="image-count">{{ news.images.length }}</span>
                </div>
                <span v-else class="no-image">无图片</span>
              </td>
              <td>{{ formatDate(news.publishDate) }}</td>
              <td>
                <span class="status-badge" :class="news.status">
                  {{ news.status === 'published' ? '已发布' : '草稿' }}
                </span>
              </td>
              <td>{{ news.publisher || '-' }}</td>
              <td>
                <div class="action-buttons">
                  <button class="view-button" @click="viewNews(news.id)">
                    查看
                  </button>
                  <button class="edit-button" @click="editNews(news)">
                    编辑
                  </button>
                  <button class="delete-button" @click="deleteNews(news.id)">
                    删除
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="filteredNews.length === 0" class="no-data">
          <p>暂无新闻数据</p>
        </div>
      </div>
      
      <div class="pagination">
        <button class="pagination-button" :disabled="currentPage === 1" @click="currentPage--">
          上一页
        </button>
        <div class="page-numbers">
          <span v-for="page in totalPages" :key="page" 
                class="page-number" :class="{ active: page === currentPage }"
                @click="currentPage = page">
            {{ page }}
          </span>
        </div>
        <button class="pagination-button" :disabled="currentPage === totalPages" @click="currentPage++">
          下一页
        </button>
      </div>
      
      <!-- 添加/编辑新闻弹窗 -->
      <div v-if="showAddNewsModal || showEditNewsModal" class="modal-overlay" @click="closeModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>{{ showEditNewsModal ? '编辑新闻' : '添加新闻' }}</h3>
            <button class="close-button" @click="closeModal">×</button>
          </div>
          <form class="news-form" @submit.prevent="saveNews">
            <div class="form-row">
            <div class="form-group">
              <label>重要等级</label>
              <select v-model="currentNews.importantLevel" required>
                <option value="high">高</option>
                <option value="medium">中</option>
                <option value="low">低</option>
              </select>
            </div>
            <div class="form-group">
              <label>发布状态</label>
              <select v-model="currentNews.status" required>
                <option value="draft">草稿</option>
                <option value="published">已发布</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>标题</label>
              <input type="text" v-model="currentNews.title" required/>
            </div>
            <div class="form-group">
              <label>发布人</label>
              <input type="text" v-model="currentNews.publisher" required/>
            </div>
          </div>
            <div class="form-group">
              <label>新闻图片</label>
              <div class="image-upload-container">
                <div class="upload-button" @click="triggerFileInput">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span>上传图片</span>
                  <input type="file" ref="fileInput" accept="image/*" multiple style="display: none" @change="handleImageUpload">
                </div>
                <div v-if="currentNews.images && currentNews.images.length > 0" class="uploaded-images">
                  <div v-for="(image, index) in currentNews.images" :key="index" class="image-preview">
                    <img :src="image" :alt="`新闻图片 ${index + 1}`" class="preview-image">
                    <button class="remove-image" @click="removeImage(index)">×</button>
                  </div>
                </div>
                <div class="upload-tips">
                  支持JPG、PNG、GIF格式，可上传多张图片
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>内容</label>
              <textarea v-model="currentNews.content" rows="10" required></textarea>
            </div>
            <div class="form-group">
              <label>底部内容</label>
              <textarea v-model="currentNews.bottomContent" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label>底部图片</label>
              <div class="image-upload-container">
                <div class="upload-button" @click="triggerBottomFileInput">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span>上传底部图片</span>
                  <input type="file" ref="bottomFileInput" accept="image/*" multiple style="display: none" @change="handleBottomImageUpload">
                </div>
                <div v-if="currentNews.bottomImages && currentNews.bottomImages.length > 0" class="uploaded-images">
                  <div v-for="(image, index) in currentNews.bottomImages" :key="index" class="image-preview">
                    <img :src="image" :alt="`底部图片 ${index + 1}`" class="preview-image">
                    <button class="remove-image" @click="removeBottomImage(index)">×</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group half-width">
              <label>发布日期</label>
              <div style="display: flex; gap: 10px;">
                <input type="datetime-local" v-model="currentNews.publishDate"/>
                <button type="button" class="now-button" @click="setNowTime">now</button>
              </div>
            </div>
            
            <div class="modal-actions">
              <button type="button" class="cancel-button" @click="closeModal">取消</button>
              <button type="submit" class="save-button">{{ showEditNewsModal ? '保存' : '添加' }}</button>
            </div>
          </form>
        </div>
      </div>
      
      <!-- 查看新闻详情弹窗 -->
      <div v-if="showViewModal" class="modal-overlay" @click="closeViewModal">
        <div class="modal-content modal-content-large" @click.stop>
          <div class="modal-header">
            <h3>{{ viewedNews.title }}</h3>
            <button class="close-button" @click="closeViewModal">×</button>
          </div>
          <div class="news-details">
            <div class="news-meta">
            <span class="publish-date">{{ formatDate(viewedNews.publishDate) }}</span>
            <span class="news-status">{{ viewedNews.status === 'published' ? '已发布' : '草稿' }}</span>
          </div>
          
          <div v-if="viewedNews.images && viewedNews.images.length > 0" class="news-images">
            <h4>新闻图片</h4>
            <div class="news-images-grid">
              <img 
                v-for="(image, index) in viewedNews.images" 
                :key="index"
                :src="image" 
                :alt="`新闻图片 ${index + 1}`" 
                class="news-detail-image"
                @click="showImageGallery(viewedNews.images)"
              >
            </div>
          </div>
          
          <div class="news-content" v-html="formatContent(viewedNews.content)"></div>
          
          <!-- 底部内容 -->
          <div v-if="viewedNews.bottomContent" class="news-bottom-content">
            <h4>底部内容</h4>
            <div v-html="formatContent(viewedNews.bottomContent)"></div>
          </div>
          
          <!-- 底部图片 -->
          <div v-if="viewedNews.bottomImages && viewedNews.bottomImages.length > 0" class="news-bottom-images">
            <h4>底部图片</h4>
            <div class="news-images-grid">
              <img 
                v-for="(image, index) in viewedNews.bottomImages" 
                :key="index"
                :src="image" 
                :alt="`底部图片 ${index + 1}`" 
                class="news-detail-image"
                @click="showImageGallery(viewedNews.bottomImages)"
              >
            </div>
          </div>
          </div>
        </div>
      </div>
      
      <!-- 图片画廊弹窗 -->
      <div v-if="showImageGallery" class="modal-overlay gallery-overlay" @click="closeImageGallery">
        <div class="gallery-modal" @click.stop>
          <div class="gallery-header">
            <span class="gallery-counter">{{ currentImageIndex + 1 }}/{{ currentImages.length }}</span>
            <button class="close-button" @click="closeImageGallery">×</button>
          </div>
          <div class="gallery-content">
            <button class="gallery-nav prev" @click="prevImage" v-if="currentImages.length > 1">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15 18L9 12L15 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <img :src="currentImages[currentImageIndex]" :alt="`图片 ${currentImageIndex + 1}`" class="gallery-image">
            <button class="gallery-nav next" @click="nextImage" v-if="currentImages.length > 1">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 18L15 12L9 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script>
import AdminLayout from './AdminLayout.vue'
import NewsStore from '../../services/NewsStore.js'

export default {
  name: 'NewsManagement',
  components: {
    AdminLayout
  },
  data() {
    return {
      news: [],
      searchQuery: '',
      statusFilter: 'all',
      currentPage: 1,
      itemsPerPage: 10,
      showAddNewsModal: false,
      showEditNewsModal: false,
      showViewModal: false,
      currentNews: {
        id: '',
        title: '',
        content: '',
        bottomContent: '',
        bottomImages: [],
        publishDate: new Date().toISOString().split('.')[0],
        status: 'draft',
        importantLevel: 'low',
        publisher: '',
        images: []
      },
      showImageGallery: false,
      currentImages: [],
      currentImageIndex: 0,
      viewedNews: {}
    }
  },
  created() {
    // 添加监听器，当NewsStore数据更新时刷新页面
    NewsStore.addListener(this.loadNews);
    // 加载新闻数据
    this.loadNews();
  },
  beforeUnmount() {
    // 移除监听器
    NewsStore.removeListener(this.loadNews);
  },
  computed: {
    filteredNews() {
      let result = [...this.news];
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(news => 
          news.title.toLowerCase().includes(query) ||
          news.content.toLowerCase().includes(query)
        );
      }
      
      // 状态过滤
      if (this.statusFilter !== 'all') {
        result = result.filter(news => news.status === this.statusFilter);
      }
      
      // 按发布日期排序（最新的在最上方，精确到秒）
      result.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
      
      // 分页
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return result.slice(startIndex, endIndex);
    },
    totalPages() {
      let result = [...this.news];
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(news => 
          news.title.toLowerCase().includes(query) ||
          news.content.toLowerCase().includes(query)
        );
      }
      
      // 状态过滤
      if (this.statusFilter !== 'all') {
        result = result.filter(news => news.status === this.statusFilter);
      }
      
      return Math.ceil(result.length / this.itemsPerPage);
    }
  },
  methods: {
    async loadNews() {
      // 如果NewsStore还没有加载过数据，则触发加载
      if (!NewsStore.isLoading && this.news.length === 0) {
        await NewsStore.loadNews();
      }
      // 从NewsStore获取所有新闻
      this.news = NewsStore.getAllNews();
    },
    
    performSearch() {
      this.currentPage = 1;
    },
    
    resetFilters() {
      this.searchQuery = '';
      this.statusFilter = 'all';
      this.currentPage = 1;
    },
    
    // 设置当前时间到发布日期输入框
    setNowTime() {
      this.currentNews.publishDate = new Date().toISOString().split('.')[0];
    },
    
    viewNews(id) {
      const news = NewsStore.getNewsById(id);
      if (news) {
        this.viewedNews = { ...news };
        this.showViewModal = true;
      }
    },
    
    editNews(news) {
      this.currentNews = { ...news };
      // 点击编辑时将发布时间默认为当前准确时间
      this.currentNews.publishDate = new Date().toISOString().split('.')[0];
      this.showEditNewsModal = true;
    },
    
    // 获取重要等级文本
    getImportantLevelText(level) {
      const levels = {
        high: '高',
        medium: '中',
        low: '低'
      };
      return levels[level] || level;
    },
    
    async deleteNews(id) {
      if (confirm('确定要删除这篇新闻吗？')) {
        const success = await NewsStore.deleteNews(id);
        if (success) {
          // 如果删除后当前页没有数据，返回上一页
          if (this.filteredNews.length === 0 && this.currentPage > 1) {
            this.currentPage--;
          }
        } else {
          alert('删除新闻失败，请重试。');
        }
      }
    },
    
    async saveNews() {
      // 添加新闻时如果没有设置发布人，设置为默认值
      if (!this.showEditNewsModal) {
        if (!this.currentNews.publisher) {
          this.currentNews.publisher = '管理员';
        }
        // 添加新闻时自动设置当前时间（如果未设置）
        if (!this.currentNews.publishDate) {
          this.currentNews.publishDate = new Date().toISOString().split('.')[0];
        }
      }
      
      if (this.showEditNewsModal) {
        // 编辑新闻
        const result = await NewsStore.updateNews(this.currentNews.id, this.currentNews);
        if (result) {
          this.closeModal();
        } else {
          alert('更新新闻失败，请重试。');
        }
      } else {
        // 添加新闻
        const result = await NewsStore.addNews(this.currentNews);
        if (result) {
          this.closeModal();
        } else {
          alert('添加新闻失败，请重试。');
        }
      }
    },
    
    closeModal() {
      this.showAddNewsModal = false;
      this.showEditNewsModal = false;
      this.currentNews = {
        id: '',
        title: '',
        content: '',
        bottomContent: '',
        bottomImages: [],
        publishDate: new Date().toISOString().split('.')[0],
        status: 'draft',
        importantLevel: 'low',
        publisher: '',
        images: []
      };
    },
    
    // 图片上传相关方法
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    
    async handleImageUpload(event) {
      const files = event.target.files;
      if (!files.length) return;
      
      if (!this.currentNews.images) {
        this.currentNews.images = [];
      }
      
      // 限制最多上传5张图片
      const maxImages = 5;
      const remainingSlots = maxImages - this.currentNews.images.length;
      const filesToProcess = Math.min(files.length, remainingSlots);
      
      if (files.length > remainingSlots) {
        alert(`最多只能上传${maxImages}张图片，已添加${remainingSlots}张`);
      }
      
      for (let i = 0; i < filesToProcess; i++) {
        const file = files[i];
        // 检查文件类型
        if (!file.type.match('image.*')) {
          alert('请上传图片文件');
          continue;
        }
        
        // 检查文件大小（限制5MB）
        if (file.size > 5 * 1024 * 1024) {
          alert('图片大小不能超过5MB');
          continue;
        }
        
        try {
          // 使用NewsStore上传图片
          const imageUrl = await NewsStore.uploadImage(file);
          this.currentNews.images.push(imageUrl);
        } catch (error) {
          console.error('Failed to upload image:', error);
          alert('上传图片失败，请重试。');
        }
      }
      
      // 清空input，允许重复选择同一文件
      event.target.value = '';
    },
      removeImage(index) {
        this.currentNews.images.splice(index, 1);
      },
      
      // 底部图片上传相关方法
      triggerBottomFileInput() {
        this.$refs.bottomFileInput.click();
      },
      
      async handleBottomImageUpload(event) {
        const files = event.target.files;
        if (!files.length) return;
        
        if (!this.currentNews.bottomImages) {
          this.currentNews.bottomImages = [];
        }
        
        // 限制最多上传3张底部图片
        const maxImages = 3;
        const remainingSlots = maxImages - this.currentNews.bottomImages.length;
        const filesToProcess = Math.min(files.length, remainingSlots);
        
        if (files.length > remainingSlots) {
          alert(`最多只能上传${maxImages}张底部图片，已添加${remainingSlots}张`);
        }
        
        for (let i = 0; i < filesToProcess; i++) {
          const file = files[i];
          // 检查文件类型
          if (!file.type.match('image.*')) {
            alert('请上传图片文件');
            continue;
          }
          
          // 检查文件大小（限制5MB）
          if (file.size > 5 * 1024 * 1024) {
            alert('图片大小不能超过5MB');
            continue;
          }
          
          try {
            // 使用NewsStore上传图片
            const imageUrl = await NewsStore.uploadImage(file);
            this.currentNews.bottomImages.push(imageUrl);
          } catch (error) {
            console.error('Failed to upload bottom image:', error);
            alert('上传底部图片失败，请重试。');
          }
        }
        
        // 清空input，允许重复选择同一文件
        event.target.value = '';
      },
      
      removeBottomImage(index) {
        this.currentNews.bottomImages.splice(index, 1);
      },
      showImageGallery(images) {
        this.currentImages = images;
        this.currentImageIndex = 0;
        this.showImageGallery = true;
      },
      closeImageGallery() {
        this.showImageGallery = false;
      },
      prevImage() {
        this.currentImageIndex = (this.currentImageIndex - 1 + this.currentImages.length) % this.currentImages.length;
      },
      nextImage() {
        this.currentImageIndex = (this.currentImageIndex + 1) % this.currentImages.length;
      },
      closeViewModal() {
      this.showViewModal = false;
      this.viewedNews = {};
    },
    // 格式化日期（包含时分秒）
    formatDate(dateString) {
      if (!dateString) return '';
      
      const date = new Date(dateString);
      // 检查是否是有效的日期
      if (isNaN(date.getTime())) {
        // 如果不是包含时分秒的格式，尝试只解析日期部分
        const dateOnly = new Date(dateString.split('T')[0]);
        if (!isNaN(dateOnly.getTime())) {
          return dateOnly.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
          });
        }
        return dateString;
      }
      
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    },
    formatContent(content) {
      // 简单的内容格式化，将换行符转换为<br>标签
      return content.replace(/\n/g, '<br>');
    }
  }
}
</script>

<style scoped>
.news-management {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.add-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #427fda;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.add-button:hover {
  background-color: #3a76d1;
}

.search-filter {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 500px;
}

.search-box svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  min-width: 250px;
  padding: 10px 15px 10px 45px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.filter-select select {
  padding: 10px 15px;
  min-width: 120px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

.news-table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
  max-height: 620px;
  overflow-y: auto;
}

.news-table {
  width: 100%;
  border-collapse: collapse;
}

.news-table th,
.news-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.news-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.news-table td {
  font-size: 14px;
  color: #666;
}

.news-title {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-cell {
  min-width: 80px;
  text-align: center;
}

.news-image-container {
  position: relative;
  display: inline-block;
}

.news-thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.news-thumbnail:hover {
  transform: scale(1.1);
}

.image-count {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
}

.no-image {
  color: #999;
  font-size: 12px;
}

.status-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .status-badge.published {
      background-color: #e8f5e9;
      color: #4caf50;
    }
    
    .status-badge.draft {
      background-color: #fff3e0;
      color: #ff9800;
    }
    
    /* 重要等级标签样式 */
    .important-level-badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .important-level-badge.high {
      background-color: #fee2e2;
      color: #991b1b;
    }
    
    .important-level-badge.medium {
      background-color: #fef3c7;
      color: #92400e;
    }
    
    .important-level-badge.low {
      background-color: #dbeafe;
      color: #1e40af;
    }

.action-buttons {
  display: flex;
  gap: 10px;
}

.view-button {
  padding: 6px 12px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.view-button:hover {
  background-color: #1976d2;
}

.edit-button {
  padding: 6px 12px;
  background-color: #ff9800;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.edit-button:hover {
  background-color: #f57c00;
}

.delete-button {
  padding: 6px 12px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.delete-button:hover {
  background-color: #d32f2f;
}

.no-data {
  padding: 60px 20px;
  text-align: center;
  color: #999;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  margin-left: 20px;
  padding: 10px 0;
}

.pagination-button {
  padding: 6px 12px;
  background-color: #fff;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 60px;
  text-align: center;
}

.pagination-button:hover:not(:disabled) {
  color: #1890ff;
  border-color: #1890ff;
}

.pagination-button:disabled {
  color: #d9d9d9;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-number:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.page-number.active {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 图片上传样式 */
.image-upload-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border: 2px dashed #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fafafa;
  color: #666;
}

.upload-button:hover {
  border-color: #4caf50;
  background-color: #f0f9f0;
  color: #4caf50;
}

.uploaded-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.image-preview {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-image {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.remove-image:hover {
  background-color: rgba(255, 0, 0, 1);
}

.upload-tips {
  font-size: 12px;
  color: #999;
}

/* 图片画廊样式 */
.gallery-overlay {
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

.gallery-modal {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: white;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.gallery-counter {
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 15px;
}

.gallery-content {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.gallery-nav:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.gallery-nav.prev {
  left: 10px;
}

.gallery-nav.next {
  right: 10px;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content-large {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-button:hover {
  background-color: #f5f5f5;
  color: #333;
}

.news-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 24px;
      flex: 1;
    }
    
    .form-row {
      display: flex;
      gap: 20px;
      margin-bottom: 24px;
    }
    
    .half-width {
      width: 50%;
      min-width: 300px;
    }
    
    .form-group label {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }
    
    .form-group textarea {
      resize: vertical;
      min-height: 150px;
    }
    
    .form-group input:disabled {
      background-color: #f8f9fa;
      cursor: not-allowed;
    }
    
    .form-hint {
      font-size: 12px;
      color: #6c757d;
      margin-top: 2px;
    }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

/* Search actions styles */
.search-actions {
  display: flex;
  gap: 10px;
}

.search-actions {
          display: flex;
          align-items: center;
          gap: 12px;
        }
        
        .search-actions .add-button {
          margin-left: auto;
        }

.search-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #45a049;
}

.reset-button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reset-button:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}

.special-button {
  padding: 10px 20px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.special-button:hover {
  background-color: #ee5253;
}

.now-button {
  padding: 8px 15px;
  background-color: #427fda;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  min-width: 50px;
}

.now-button:hover {
  background-color: #3a76d1;
}

.cancel-button {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background-color: white;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.cancel-button:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.save-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.save-button:hover {
  background-color: #45a049;
}

/* 新闻详情样式 */
    .news-details {
      padding: 10px 0;
    }
    
    .news-meta {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e0e0e0;
    }
    
    .news-images {
      margin: 20px 0;
    }
    
    .news-images h4 {
      margin-bottom: 15px;
      font-size: 16px;
      color: #333;
    }
    
    .news-images-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
    }
    
    .news-detail-image {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    
    .news-detail-image:hover {
      transform: scale(1.02);
    }
    
    .publish-date {
      font-size: 14px;
      color: #666;
    }
    
    .news-status {
      font-size: 14px;
      padding: 2px 8px;
      border-radius: 4px;
      background-color: #e8f5e9;
      color: #4caf50;
    }
    
    .news-content {
      font-size: 16px;
      line-height: 1.8;
      color: #333;
      white-space: pre-wrap;
    }
    
    /* 底部内容样式 */
    .news-bottom-content {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #e0e0e0;
    }
    
    .news-bottom-content h4 {
      margin-bottom: 12px;
      color: #333;
      font-size: 16px;
      font-weight: 600;
    }
    
    /* 底部图片样式 */
    .news-bottom-images {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #e0e0e0;
    }
    
    .news-bottom-images h4 {
      margin-bottom: 12px;
      color: #333;
      font-size: 16px;
      font-weight: 600;
    }

/* Responsive design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .search-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .news-table-container {
    overflow-x: auto;
  }
  
  .news-table {
    min-width: 600px;
  }
  
  .modal-content {
    margin: 20px;
    padding: 20px;
  }
}
</style>